<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/layout.css">
    <style>

    </style>
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="box">
        <div class="warp">
            <div class="top">
                <ul>
                    <li><a href="a#"><img src="./img/star.jpg" alt="" srcset=""></a></li>
                    <li>收藏</li>
                    <li>|</li>
                    <li>Hi,欢迎来订购!</li>
                    <a href="./register.html">
                        <li class="text">[请登录]</li>
                    </a>
                    <a href="./register.html">
                        <li class="text">[免费注册]</li>
                    </a>
                </ul>
            </div>
            <div class="top-rigth">
                <a href="#">客户服务</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>

                <a href="#">网站导航</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
                <a href="#"><img class="top-rigth-go" src="./img/shoppingcart.png" alt="" srcset=""></a>
                <a href="#">我的购物车0件</a>
                <a href="#"><img src="./img/arrow.gif" alt="" srcset=""></a>
            </div>
        </div>
    </div>
    <!-- 顶部导航条end -->

    <!-- 顶部图片 -->
    <div class="warp">
        <div class="warp-manbu">
            <a href="#" class="manbu-left"><img src="./img/漫步时代广场-左.jpg" alt="" srcset=""></a>
            <a href="#" class="manbu-rigth"><img src="./img-layout/banner.jpg" alt="" srcset=""></a>
        </div>
    </div>
    <!-- 顶部图片end -->

    <!-- 导航条 -->
    <div class="daohang">
        <div class="warp">
            <div class="daohang-text">
                <ul class="nav">
                    <a href="./index.html">
                        <li>首页</li>
                    </a>
                    <a href="">
                        <li>最新上架</li>
                    </a>
                    <a href="./layout.html">
                        <li>品牌活动</li>
                    </a>
                    <a href="">
                        <li>原厂直供</li>
                    </a>
                    <a href="">
                        <li>团购</li>
                    </a>
                    <a href="./details.html">
                        <li>限时抢购</li>
                    </a>
                    <a href="./layout.html">
                        <li>促销打折</li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航条end -->
    <div class="warp">
        <div class="center">
            <div class="center-left">
                <ul>
                    <li class="nn"><a href="#">女装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">上衣<span>></span></a>

                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">下装<span>></span></a>

                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">连衣裙<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">内衣<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">男装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">T恤<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">短裤<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">衬衫<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">童装</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">上衣<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">裤子<span>></span></a>
                    </li>

                    <li class="nn"><a href="#">运动</a></li>
                    <li>
                        <p>.</p>
                        <a href="#">运动鞋<span>></span></a>
                    </li>
                    <li>
                        <p>.</p>
                        <a href="#">跑步鞋<span>></span></a>
                    </li>
                </ul>
            </div>

            <!-- 右边盒子 -->
            <div class="center-rigth">
                <!-- <div class="toggle">
                    <button class="prev">&lt;</button>
                    <button class="next">&gt;</button>
                </div> -->

                <img src="./img-layout/pic1.jpg" alt="" srcset="">
                <ul class="slider-indicator">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
          <script src="./js/layout.js"></script>
            <div class="gonggao">
                <ul>
                    <li class="gonggao-bian" style="pointer-events: none;">公告</li>
                    <li>
                        <!--<em>&middot;</em> 这种方法也可以设置圆点 em标签默认是倾斜的-->
                        <!-- <style>
                            em{
                                /* 取消倾斜 */
                                font-style: normal;
                                /* 字体加粗 */
                                font-weight: bold;
                            }
                        </style> -->
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                    <li>
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                    <li>
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                    <li>
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                    <li>
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                    <li>
                        <span>.</span><a href="">李克强点赞网店第一名</a>
                    </li>
                </ul>
                <div class="xiao-img">
                    <img src="./img-layout/link1.gif" alt="" srcset="">
                    <img src="./img-layout/link2.gif" alt="" srcset="">
                    <img src="./img-layout/link3.gif" alt="" srcset="">
                    <img src="./img-layout/link4.gif" alt="" srcset="">
                    <img src="./img-layout/link5.jpg" alt="" srcset="">
                    <img src="./img-layout/link6.jpg" alt="" srcset="">
                    <img src="./img-layout/link7.jpg" alt="" srcset="">
                    <img src="./img-layout/link8.jpg" alt="" srcset="">
                    <img src="./img-layout/link9.jpg" alt="" srcset="">
                </div>
            </div>
            <!-- 右边盒子 end-->
            <div class="display">
                <div class="display-1">
                    <img src="./img-layout/pro1.jpg" alt="" srcset="">
                    <div class="nav-top-h3">
                        <h3 class="top-h3">热门品类 </h3>
                        <h3>护肤彩妆启示</h3>
                    </div>
                    <div class="dibu-text">
                        <ul class="display-1-text">
                            <li>洗护套装</li>
                            <li>面部精华</li>
                            <li>香水</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>粉底液</li>
                            <li>面霜</li>
                            <li>洁面</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                    </div>

                </div>
                <div class="display-1">
                    <img src="./img-layout/pro2.jpg" alt="" srcset="">
                    <div class="nav-top-h3">
                        <h3 class="top-h3">热门品类 </h3>
                        <h3>护肤彩妆启示</h3>
                    </div>
                    <div class="dibu-text">
                        <ul class="display-1-text">
                            <li>隔离</li>
                            <li>保湿</li>
                            <li>补水</li>
                            <li>清洁</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>清爽</li>
                            <li>排毒</li>
                            <li>去角质</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美白</li>
                            <li>祛痘</li>
                            <li>收缩毛孔</li>
                            <li>紧致</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                    </div>
                </div>
                <div class="display-1">
                    <img src="./img-layout/pro3.jpg" alt="" srcset="">
                    <div class="nav-top-h3">
                        <h3 class="top-h3">热门品类 </h3>
                        <h3>护肤彩妆启示</h3>
                    </div>
                    <div class="dibu-text">
                        <ul class="display-1-text">
                            <li>洗护套装</li>
                            <li>面部精华</li>
                            <li>香水</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>粉底液</li>
                            <li>面霜</li>
                            <li>洁面</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                    </div>
                </div>
                <div class="display-1">
                    <img src="./img-layout/pro4.jpg" alt="" srcset="">
                    <div class="nav-top-h3">
                        <h3 class="top-h3">热门品类 </h3>
                        <h3>护肤彩妆启示</h3>
                    </div>
                    <div class="dibu-text">
                        <ul class="display-1-text">
                            <li>洗护套装</li>
                            <li>面部精华</li>
                            <li>香水</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>粉底液</li>
                            <li>面霜</li>
                            <li>洁面</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                    </div>

                </div>
                <div class="display-1">
                    <img src="./img-layout/pro5.jpg" alt="" srcset="">
                    <div class="nav-top-h3">
                        <h3 class="top-h3">热门品类 </h3>
                        <h3>护肤彩妆启示</h3>
                    </div>
                    <div class="dibu-text">
                        <ul class="display-1-text">
                            <li>洗护套装</li>
                            <li>面部精华</li>
                            <li>香水</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>粉底液</li>
                            <li>面霜</li>
                            <li>洁面</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                        <ul class="display-1-text">
                            <li>美容工具</li>
                            <li>复方精油</li>
                            <li>洗发</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部横条 -->
    <div class="hengfu-1">
        <div class="cneter-img">
            <ul>
                <li>
                    <img src="./img-layout/gray1.jpg" alt="" srcset="">
                </li>
                <li>
                    <img src="./img-layout/gray2.jpg" alt="" srcset="">
                </li>
                <li>
                    <img src="./img-layout/gray3.jpg" alt="" srcset="">
                </li>
                <li>
                    <img src="./img-layout/gray4.jpg" alt="" srcset="">
                </li>
                <li>
                    <img src="./img-layout/gray5.jpg" alt="" srcset="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部横条end -->

    <!-- 底部表格 -->
    <div class="warp">
        <div class="dibu-nav">
            <ul>
                <li>
                    <img src="./img-layout/red1.jpg" alt="" srcset="">
                    <h3>新手指导</h3>
                </li>
                <li>
                    <img src="./img-layout/red2.jpg" alt="" srcset="">
                    <h3>支付方式</h3>
                </li>
                <li>
                    <img src="./img-layout/red3.jpg" alt="" srcset="">
                    <h3>配送方式</h3>
                </li>
                <li>
                    <img src="./img-layout/red4.jpg" alt="" srcset="">
                    <h3>售后服务</h3>
                </li>
                <li>
                    <img src="./img-layout/red5.jpg" alt="" srcset="">
                    <h3>关于账号</h3>
                </li>
                <li>
                    <img src="./img-layout/red6.jpg" alt="" srcset="">
                    <h3>优惠活动</h3>
                </li>
            </ul>
        </div>
        <div class="dibu-waibian">
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>

                    </ul>
                </div>
            </div>
            <div class="dibu-biaoge">
                <div class="xiao">
                    <ul class="dibu-biaoge-broder">
                        <a href="#">
                            <li>用户注册</li>
                        </a>
                        <a href="#">
                            <li>用户注册</li>
                        </a>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部表格end -->

    <div class="dibu">
        <p class="dibu-text"><a href="#">Copyright 2015-2020 Q- Walking Fashion E&S漫步时尚广场(QST教育)版权所有</a></p>
        <p><a href="#">中国青岛高新区河东路8888号青软教育集团咨询热线: 400- 658 0166400- 658 1022</a></p>
        <img src="./img/foot_pic.jpg" alt="" srcset="">
    </div>

    <script>

      </script>

</body>

</html>